<template>
	<view class="page-box">
		<view class="search-box">
			<view class="top-box">
				<image src="../../static/image/search.png"></image>
				<input placeholder="请输入要搜索的商品"  confirm-type="done" @confirm="Search"/>
			</view>
		</view>
		<view class="hot-box">
			<view class="hot-title">
				<image src="../../static/image/hot.png"></image>
				<text>热门搜索</text>
			</view>
			<view class="hottext">
				<view v-for="(item,index) in hotword" :key="index" class="textbox">{{item}}</view>
			</view>
			
		</view>
		<!-- 搜索框列表 -->
		<view class="serchList" v-for="(item,index) in titleList" :key="index">
			<view class="ser_title" @click="GoGoodDetail(item._id)">{{index+1}}.{{item.title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleList:[],
				hotword:['手机','衣服','零食']
			}
		},
		onLoad() {
			
		},
		methods: {
			GoGoodDetail(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/goods/goods-detail'+`?id=${id}`
				})
				},
			Search(event){
				console.log(event.detail.value)
				uniCloud.callFunction({
					name:'search',
					data:{
						category:event.detail.value
					},
					success: (rest) => {
						console.log('轮播图获取成功',rest.result.data)
						this.titleList = rest.result.data
						if(this.titleList.length == 0){
							uni.showToast({
							    title: '未找到该商品',
								icon:'none',
							    duration: 1000
							});
							}
						
					},
					fail: (err) => {
						console.log('轮播图获取失败',err)
					}
				})
				}
		}
	}
	
</script>

<style scoped lang="scss" scoped>
	.search-box{
		background-color: #ff6633;
		padding: 20rpx;
		}
	.top-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 24rpx;
		background-color: #FFFFFF;
		border-radius:50rpx;
		image{
			width: 36rpx;
			height: 36rpx;
			margin-right: 26rpx;
			}
		}
	.serchList{
		background-color: #FFFFFF;
		margin: 0rpx 20rpx 20rpx 20rpx;
		border-radius: 12rpx;
		}
	.ser_title{
		font-size: 28rpx;
		color: #ff6633;
		padding: 24rpx 30rpx;
		text-align: left;
		line-height: 40rpx;
		border-radius:16rpx;
		}	
	.hot-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin:20rpx 20rpx;
		}
	.hot-title{
		display: flex;
		flex-direction: row;
		align-items: center;
		image{
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
			}
		text{
			font-size: 30rpx;
			line-height: 40rpx;
			color: #808080;
			}
		}
	.hottext{
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		}
	.textbox{
		width: 90rpx;
		text-align: center;
		border: 1rpx solid  #808080;
		color:#808080;
		margin-right:20rpx;
		border-radius:20rpx;
		}
</style>
